<template>
	<div class="lottie" ref="lottieRef" @click="_click">
	</div>
</template>

<script>
	import props from './props.js'
	export default {
		name: 'cnde-lottie',
		mixins: [props],
		data() {
			return {

			}
		},
		mounted() {
		},
		computed: {}
	}
</script>

<script module="renderLottie" lang="renderjs">
	import lottie from 'lottie-web'
	import methods from './methods'
	
	export default {
		data() {
			return {
				lottieObj: '',
			}
		},
		mounted() {
			this.createLottie()
		},
		methods: {
			createLottie(){
				// 构建lottied动画
				let option = {}
				let me=this
				let {
					$refs:{lottieRef:container}, loop, autoplay, dataJson:animationData, dataPath:path
				} = this
				if(animationData && Object.prototype.toString.call(animationData)==='[object Promise]'){
					// 适配import()函数
					animationData.then(data=>{
						loadAnimation(data)
					})
				}else{
					loadAnimation()
				}
				function loadAnimation(data){
					let optionDefault = {
						container,
						loop,
						autoplay,
						animationData:data || animationData,
						path
					}
					if (!me.lottieObj) {
						Object.assign(option, optionDefault, me.animationOption) //animationOption对象覆盖前面的默认值，优先级最高
						me.lottieObj = lottie.loadAnimation(option);
					}
				}
			},
			_click(){
				// 触发父组件的click事件
				this.$emit('click')
			},
			getLottie(){
				return this.lottieObj
			},
			play() {
				// 开始
				console.log('111111111111111')
				this.lottieObj.play()
			},
			pause(){
				// 暂停
				this.lottieObj.pause()
			},
			reset(){
				// 重置
				this.lottieObj.goToAndStop(0)
			},
			replay(){
				// 重新开始
				console.log('rrrrrrrrrrrrrr')
				this.lottieObj.goToAndPlay(50)
			},
			test(){
				console.log('tttttttttttttt')
			}
		}
	}
</script>
<style>
</style>
